<template>
    <div>
      <h1>待办事项</h1>
      <ul>
        <li v-for="(todo, index) in todos" :key="index">
          {{ todo.name }}
          <button @click="removeTodo(index)">删除</button>
        </li>
      </ul>
      <input v-model="newTodo" placeholder="添加待办">
      <button @click="addTodo">添加</button>
      <p v-if="todoCount > 0">你的待办事项的数量：{{ todoCount }}</p>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        todos: [],
        newTodo: ''
      };
    },
    computed: {
      todoCount() {
        return this.todos.length;
      }
    },
    methods: {
      addTodo() {
        if (this.newTodo.trim()) {
          this.todos.push({ name: this.newTodo.trim(), completed: false });
          this.newTodo = '';
        }
      },
      removeTodo(index) {
        this.todos.splice(index, 1);
      }
    }
  }
  </script>